<script setup lang="ts">
import { useRouter } from "vue-router";
import request from "../request/request";
import { onActivated, onMounted, ref } from "vue";
const hotLoading = ref(false)
const hot = ref([])

const cfLoading = ref(false)
const cf = ref([])

const vsmLoading = ref(false)
const vsm = ref([])

const seenLoading = ref(false)
const seen = ref([])

const router = useRouter()

const gotoNewsView = (newsId: number) => {
  // console.log(n)
  router.push({
    path: '/news/' + newsId,
  })
}

import { useUsersStore } from "../store/user";
const store = useUsersStore();

onActivated(() => {
  // keep alive 下，有时用户进行了兴趣操作，之后返回了主页，则需要刷新主页内容
  if (store.needForceRefresh) {
    console.log('need refresh');
    getContents()
    store.needForceRefresh = false
  }
})

onMounted(() => {
  // mounted则一定要硬刷新，这个主要是浏览器按下的刷新按钮之后触发
  console.log('in recommend mounted');
  getContents()
})

const getContents = () => {
  // 一定从后端拿数据，不再考虑sessionStorage，sessionStorage的内容仅用于加速看新闻内容
  hotLoading.value = true
  cfLoading.value = true
  vsmLoading.value = true
  seenLoading.value = true

  // function getFromSessionStoarge(key: string) {
  //   let valueRaw = sessionStorage.getItem(key)
  //   if (valueRaw != null) {
  //     return JSON.parse(valueRaw)
  //   }
  //   else {
  //     return []
  //   }
  // }
  console.log("need send request hot");
  request.get("/recommend/hot/" + sessionStorage.getItem("userId")).then((response) => {
    // console.log(response);
    hot.value = response.data
    hotLoading.value = false
    sessionStorage.setItem("hot", JSON.stringify(response.data));
  })

  console.log("need send request cf");
  request.get("/recommend/get_cf_result/" + sessionStorage.getItem("userId")).then((response) => {
    // console.log(response);
    cf.value = response.data
    cfLoading.value = false
    sessionStorage.setItem("cf", JSON.stringify(response.data));
  })

  console.log("need send request vsm");
  request.get("/recommend/vsm/" + sessionStorage.getItem("userId")).then((response) => {
    // console.log(response);
    vsm.value = response.data
    vsmLoading.value = false
    sessionStorage.setItem("vsm", JSON.stringify(response.data));
  })

  console.log("need send request seen");
  request.get("/recommend/seen/" + sessionStorage.getItem("userId")).then((response) => {
    // console.log(response);
    seen.value = response.data
    seenLoading.value = false
    sessionStorage.setItem("seen", JSON.stringify(response.data));
  })
}

const forceRefreshSessionStorage = () => {
  // 除了userId之外，重建sessionStorage缓存
  let userId = sessionStorage.getItem("userId") || ""
  sessionStorage.clear()
  sessionStorage.setItem("userId", userId)
  window.location.reload()
}

</script>

<template>
  <div>
    <!-- <div class=eb-fb></div> -->
    <div class="c-d c-d-e">
      <div class=bc>
        <div class=bc-tc>
        </div>
        <div class=bc-cc id=Sortable>
          <div class=cc-cd id=node-60>
            <div>
              <div class=cc-cd-ih>
                <div class=cc-cd-is>
                  <a href="">
                    <div class=cc-cd-lb>
                      <!-- <img
                                              src=""> -->
                      <span>实时热点</span>
                    </div>
                  </a>
                </div>
                <div class=cc-cd-sb>
                  <div class="cc-cd-sb-ss cc-cd-sb-ss-ia">
                    <!-- <span class=cc-cd-sb-st>排行榜</span> -->
                  </div>
                </div>
              </div>
              <div v-loading="hotLoading" class="cc-cd-cb nano has-scrollbar">
                <div class="cc-cd-cb-l test-1 nano-content" tabindex=0 style="right:0px;">
                  <a v-for="(item, index) in hot" @click="gotoNewsView(item.id)" rel=nofollow itemid=140715523>
                    <div class=cc-cd-cb-ll>
                      <span class="s h"> {{ index + 1 }}</span>
                      <span class=t>{{ item.title }}</span>
                      <!-- <span class=e>{{ n.id }}</span> -->
                    </div>
                  </a>
                </div>
                <div class=nano-pane style="display:none"></div>
              </div>
              <div class=cc-cd-if>
                <!-- <div class=i-h>3 分钟前</div> -->
                <div class=i-o nodeid=60 homepage=https://www.taptap.com hashid=6ARe1k2v7n isfollow=0>
                  <div class=m-n></div>
                </div>
              </div>
            </div>
          </div>
          <div class=cc-cd id=node-3254>
            <div>
              <div class=cc-cd-ih>
                <div class=cc-cd-is>
                  <a>
                    <div class=cc-cd-lb>
                      <!-- <img
                                                  src=""> -->
                      <span>每日推荐</span>
                    </div>
                  </a>
                </div>
                <div class=cc-cd-sb>
                  <div class="cc-cd-sb-ss cc-cd-sb-ss-ia">
                    <!-- <span class=cc-cd-sb-st>最新新闻</span> -->
                  </div>
                </div>
              </div>
              <div v-loading="cfLoading" class="cc-cd-cb nano has-scrollbar">
                <!-- <div class="scrollbar "></div> -->
                <div class="cc-cd-cb-l test-1 nano-content" tabindex=0 style="right:0px">
                  <a v-for="(item, index) in cf" @click="gotoNewsView(item.id)" rel=nofollow itemid=140715523>
                    <div class=cc-cd-cb-ll>
                      <span class="s h"> {{ index + 1 }}</span>
                      <span class=t>{{ item.title }}</span>
                      <!-- <span class=e>{{ n.id }}</span> -->
                    </div>
                  </a>
                </div>
                <!-- <div class="nano-pane ">
                              <div class=nano-slider style="height:37px;transform:translate(0px,0px)"></div>
                          </div> -->
              </div>
              <div class=cc-cd-if>
                <!-- <div class=i-h>42 分钟前</div> -->
                <div class=i-o nodeid=3254 homepage=https://m.3dmgame.com/news/ hashid=YqoXQR0vOD isfollow=0>
                  <div class=m-n></div>
                </div>
              </div>
            </div>
          </div>
          <div class=cc-cd id=node-295>
            <div>
              <div class=cc-cd-ih>
                <div class=cc-cd-is>
                  <a>
                    <div class=cc-cd-lb>
                      <!-- <img
                                                  src=> -->
                      <span>兴趣推荐</span>
                    </div>
                  </a>
                </div>
                <div class=cc-cd-sb>
                  <div class="cc-cd-sb-ss cc-cd-sb-ss-ia">
                    <!-- <span class=cc-cd-sb-st>每日最新</span> -->
                  </div>
                </div>
              </div>
              <div v-loading="vsmLoading" class="cc-cd-cb nano has-scrollbar">
                <div class="cc-cd-cb-l test-1 nano-content" tabindex=0 style="right:0px">
                  <a v-for="(item, index) in vsm" @click="gotoNewsView(item.id)" rel=nofollow itemid=140715523>
                    <div class=cc-cd-cb-ll>
                      <span class="s h"> {{ index + 1 }}</span>
                      <span class=t>{{ item.title }}</span>
                      <!-- <span class=e>{{ n.id }}</span> -->
                    </div>
                  </a>
                </div>
                <!-- <div class=nano-pane>
                              <div class=nano-slider style="height:93px;transform:translate(0px,0px)"></div>
                          </div> -->
              </div>
              <div class=cc-cd-if>
                <!-- <div class=i-h>3 分钟前</div> -->
                <div class=i-o nodeid=295 homepage=https://www.gcores.com hashid=wWmoOVYe4E isfollow=0>
                  <div class=m-n></div>
                </div>
              </div>
            </div>
          </div>
          <div class=cc-cd id=node-203>
            <div>
              <div class=cc-cd-ih>
                <div class=cc-cd-is>
                  <a>
                    <div class=cc-cd-lb>
                      <!-- <img
                                                  src=""> -->
                      <span>兴趣记录</span>
                    </div>
                  </a>
                </div>
                <div class=cc-cd-sb>
                  <div class="cc-cd-sb-ss cc-cd-sb-ss-ia">
                    <!-- <span class=cc-cd-sb-st>首页推荐</span> -->
                  </div>
                </div>
              </div>
              <div v-loading="seenLoading" class="cc-cd-cb nano has-scrollbar">
                <div class="cc-cd-cb-l test-1 nano-content" tabindex=0 style="right:0px">
                  <a v-for="(item, index) in seen" @click="gotoNewsView(item.id)" rel=nofollow itemid=140715523>
                    <div class=cc-cd-cb-ll>
                      <span class="s h"> {{ index + 1 }}</span>
                      <span class=t>{{ item.title }}</span>
                      <!-- <span class=e>{{ n.id }}</span> -->
                    </div>
                  </a>
                </div>
                <!-- <div class=nano-pane>
                              <div class=nano-slider style="height:162px;transform:translate(0px,0px)"></div>
                          </div> -->
              </div>
              <div class=cc-cd-if>
                <!-- <div class=i-h>3 分钟前</div> -->
                <div @click="forceRefreshSessionStorage()" class=i-o nodeid=203 hashid=Om4ej8mvxE isfollow=0>
                  <div class=m-n></div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>



    </div>
  </div>
</template>

<style scoped></style>
